<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Mycat可视化平台</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <div th:replace="common/css"></div>
</head>
<body>
<!-- vue入口 -->
<div id="app">
    <!-- aside -->
    <div th:replace="common/side"></div>
    <!-- container -->
    <el-container class="main-container">
        <!-- header -->
        <div style="background-color: rgb(84, 92, 100);" th:replace="common/header"></div>
        <!-- main -->
        <el-main class="app-main">
            <el-card>
                <el-divider content-position="left"><h3>Mycat平台参数</h3></el-divider>
                <div class="row">
                    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
                        <div class="card-box noradius noborder bg-default">
                            <div style="width: 100px;">
                                <h4 class="text-white text-uppercase">Mycat已启动</h4>
                                <h1 class="text-white counter">{{time}}</h1>
                                <span class="text-white">min</span>
                            </div>
                            <div style="width: 240px;position: absolute;left: 45px;top: 25px;">
                                <i class=" fa fa-desktop float-right text-white" style="font-size: 80px;margin-top: 20px"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
                        <div class="card-box noradius noborder bg-warning">
                            <div style="width: 100px;">
                                <h4 class="text-white text-uppercase">节点主机(dataHost)</h4>
                                <h1 class="text-white counter">{{dataNodes.length}}</h1>
                                <span class="text-white">主机</span>
                            </div>
                            <div style="width: 240px;position: absolute;left: 45px;top: 25px;">
                                <i class="fa fa-bar-chart float-right text-white" style="font-size: 80px;margin-top: 20px"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3 " style="">
                        <div class="card-box noradius noborder bg-info">
                            <div style="width: 100px;">
                                <h4 class="text-white text-uppercase">逻辑库(schema)</h4>
                                <h1 class="text-white counter">{{schemaCount}}</h1>
                                <span class="text-white">个</span>
                            </div>
                            <div style="width: 240px;position: absolute;left: 45px;top: 25px;">
                                <i class="fa fa-tasks float-right text-white" style="font-size: 80px;margin-top: 20px"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-md-6 col-lg-6 col-xl-3">
                        <div class="card-box noradius noborder bg-danger" style="display: block;">
                            <div style="width: 100px;">
                                <h4 class="text-white text-uppercase">Mycat已使用内存</h4>
                                <h1 class="text-white counter">{{memory}}</h1>
                                <span class="text-white">M</span>
                            </div>
                            <div style="width: 240px;position: absolute;left: 45px;top: 25px;">
                                <i class="fa fa-area-chart float-right text-white" style="font-size: 80px;margin-top: 20px"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>

            <br>
            <el-card class="box-card" shadow="always">
                <div slot="header" class="clearfix">
                    <el-divider content-position="left"><h3>Mycat防火墙白名单</h3></el-divider>
                </div>
                <el-table :data="MycatFirewallConfig" size="small" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" border>
                    <el-table-column prop="key" label="IP地址">
                        <template slot-scope="scope">
                            {{scope.row.key}}
                        </template>
                    </el-table-column>
                    <el-table-column label="对应用户">
                        <template slot-scope="scope">
                            <el-checkbox-group v-model="scope.row.names">
                                <el-checkbox v-for="user in scope.row.names" :label="user" :key="user" disabled></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <br>
            <el-card class="box-card" shadow="always">
                <div slot="header" class="clearfix ">
                    <el-divider content-position="left"><h3>Mycat防火墙黑名单</h3></el-divider>
                </div>
                <el-table :data="blackList" size="small" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" border>
                    <el-table-column prop="key" label="黑名单">
                        <template slot-scope="scope">
                            {{scope.row.key}}
                        </template>
                    </el-table-column>
                    <el-table-column label="IP地址">
                        <template slot-scope="scope">
                            {{scope.row.value}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <br>

            <el-row :gutter="12">
                <el-col :span="6" v-for="dataNode in dataNodes">
                    <el-card shadow="always">
                        <div slot="header" class="clearfix ">
                            <span>dataNode：{{dataNode.name}}</span>
                        </div>
                        <el-collapse>
                            <el-collapse-item name="3">
                                <template slot="title">
                                    <b>dataNode.database</b>&nbsp;&nbsp;<i class="header-icon el-icon-info"></i>
                                </template>
                                <div>{{dataNode.database}}</div>
                            </el-collapse-item>
                            <el-collapse-item name="2">
                                <template slot="title">
                                    <b>dataNode.dataHost</b>&nbsp;&nbsp;<i class="header-icon el-icon-info"></i>
                                </template>
                                <div>
                                    <span>DataHost名称: {{dataNode.dataHost.name}}</span><br>
                                    <span>最大连接: {{dataNode.dataHost.maxCon}}</span><br>
                                    <span>最小连接: {{dataNode.dataHost.minCon}}</span><br>
                                    <span>数据库类型: {{dataNode.dataHost.dbType}}</span><br>
                                    <span>连接方式: {{dataNode.dataHost.dbDriver}}</span><br>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
<div th:replace="common/js"></div>
<script type="text/javascript" th:src="@{/js/index.js}"></script>
</body>
</html>
